/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-09-20 09:05:39
 * @LastEditTime: 2024-01-04 15:54:09
 */
import './index.less'

const NumberBox = (props: any) => {
    const { title, size, decorate, value, suffix, style, itemStyle, countStyle, suffixStyle, titleStyle, direction='vertical',countClass } = props
    return (
        <div
            className={`${size ? 'total-number-box--' + size : 'total-number-box'} ${decorate ? 'total-number--decorate' : ''} total-number-${direction}`}
            style={style}>
            <div className={'number-title'} style={titleStyle}>{title}</div>
            <div style={countStyle}>
                <div className={`flex items-baseline gap-x-2.5 mt-2.5 number-item-box ${countClass}`}>
                    {
                        value?.toString().split('').map((item: any, index: number) => {
                            return <span className={'number-item'} style={itemStyle} key={index}>{item}</span>
                        })}
                    {suffix ? <span style={suffixStyle}>{suffix}</span> : null}
                </div>
            </div>
        </div>
    )
}
export default NumberBox